<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<!-- 底部操作菜单 -->
<template>
  <aster-popup
    :show="props.show"
    mode="bottom"
    @close="closeHandler()"
    :safe-area-inset-bottom="props.safeAreaInsetBottom"
    :round="props.round"
  >
    <view class="aster-action-sheet">
      <view class="aster-action-sheet__header" v-if="!isEmpty(props.title)">
        <text class="aster-action-sheet__header__title">{{ props.title }}</text>
        <view class="aster-action-sheet__header__icon-wrap" @tap.stop="cancel()">
          <uni-icon name="closeempty" size="17" color="#c8c9cc" bold />
        </view>
      </view>
      <text
        class="aster-action-sheet__description"
        :style="{
          marginTop: `${props.title && props.description ? 0 : '18px'}`,
        }"
        v-if="props.description"
      >
        {{ props.description }}
      </text>
      <slot>
        <view v-if="props.description" class="aster-line" />
        <view class="aster-action-sheet__item-wrap">
          <view v-for="(item, index) in props.list" :key="index">
            <!-- #ifdef MP -->
            <button
              class="aster-reset-button"
              @tap="selectHandler(index)"
              :hover-class="!item.disabled && !item.loading ? 'aster-action-sheet--hover' : ''"
            >
              <!-- #endif -->
              <view
                class="aster-action-sheet__item-wrap__item"
                @tap.stop="selectHandler(index)"
                :hover-class="!item.disabled && !item.loading ? 'aster-action-sheet--hover' : ''"
                :hover-stay-time="150"
              >
                <template v-if="!item.loading">
                  <text class="aster-action-sheet__item-wrap__item__name" :style="itemStyle(index)">
                    {{ item.name }}
                  </text>
                  <text v-if="item.subname" class="aster-action-sheet__item-wrap__item__subname">
                    {{ item.subname }}
                  </text>
                </template>
              </view>
              <!-- #ifdef MP -->
            </button>
            <!-- #endif -->
            <view v-if="index !== list.length - 1" class="aster-line" />
          </view>
        </view>
      </slot>
      <view class="aster-gap" v-if="props.cancelText" />
      <view hover-class="aster-action-sheet--hover">
        <text
          @touchmove.stop.prevent
          :hover-stay-time="150"
          v-if="props.cancelText"
          class="aster-action-sheet__cancel-text"
          @tap="cancel()"
        >
          {{ props.cancelText }}
        </text>
      </view>
    </view>
  </aster-popup>
</template>
<script setup lang="ts">
  import { addUnit } from '@/utils';
  import { isEmpty } from '@/utils/is';
  import AsterPopup from './aster-popup.vue';

  const props = defineProps({
    // 操作菜单是否展示 （默认false）
    show: {
      type: Boolean,
      default: () => false,
    },
    // 标题
    title: {
      type: String,
      default: () => '',
    },
    // 选项上方的描述信息
    description: {
      type: String,
      default: () => '',
    },
    // 数据
    list: {
      type: Array<any>,
      default: () => [],
    },
    // 取消按钮的文字，不为空时显示按钮
    cancelText: {
      type: String,
      default: () => '',
    },
    // 点击某个菜单项时是否关闭弹窗
    closeOnClickAction: {
      type: Boolean,
      default: () => true,
    },
    // 处理底部安全区（默认true）
    safeAreaInsetBottom: {
      type: Boolean,
      default: () => true,
    },
    // 小程序的打开方式(contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error )
    openType: {
      type: String,
      default: () => '',
    },
    // 点击遮罩是否允许关闭 (默认true)
    closeOnClickOverlay: {
      type: Boolean,
      default: () => true,
    },
    // 圆角值
    round: {
      type: [Boolean, String, Number],
      default: () => 0,
    },
  });

  const emits = defineEmits(['close', 'select']);

  const closeHandler = () => {
    // 允许点击遮罩关闭时，才发出close事件
    if (props.closeOnClickOverlay) {
      emits('close');
    }
  };
  // 点击取消按钮
  const cancel = () => {
    emits('close');
  };

  const selectHandler = (index: number) => {
    const item = props.list[index];
    if (item && !item.disabled && !item.loading) {
      emits('select', item);
      if (props.closeOnClickAction) {
        emits('close');
      }
    }
  };

  const itemStyle = (index: number) => {
    let style: any = {};
    if (props.list[index]?.color) style.color = props.list[index].color;
    if (props.list[index]?.fontSize) style.fontSize = addUnit(props.list[index].fontSize);
    // 选项被禁用的样式
    if (props.list[index]?.disabled) style.color = '#c0c4cc';
    return style;
  };
</script>

<style lang="scss" scoped>
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }

  .aster-action-sheet {
    text-align: center;

    &__header {
      position: relative;
      padding: 24rpx 60rpx;

      &__title {
        font-size: 32rpx;
        color: #303133;
        font-weight: bold;
        text-align: center;
      }

      &__icon-wrap {
        position: absolute;
        right: 30rpx;
        top: 30rpx;
      }
    }

    &__description {
      font-size: 26rpx;
      color: #909193;
      margin: 36rpx 30rpx;
      text-align: center;
    }

    &__item-wrap {
      &__item {
        padding: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        &__name {
          font-size: 32rpx;
          color: #303133;
          text-align: center;
        }

        &__subname {
          font-size: 26rpx;
          color: #c0c4cc;
          margin-top: 20rpx;
          text-align: center;
        }
      }
    }

    &__cancel-text {
      font-size: 32rpx;
      color: #606266;
      text-align: center;
      padding: 30rpx;
    }

    &--hover {
      background-color: rgb(242, 243, 245);
    }
  }

  .aster-line {
    margin: 0rpx;
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    width: 100%;
    border-color: #d6d7d9;
  }

  .aster-reset-button {
    width: 100%;
  }

  .aster-gap {
    background-color: #eaeaec;
    height: 12rpx;
  }
</style>
